import React from "react";
import {
  NavLink,
  Route,
  Routes,
  useParams,
  useLocation,
  useSearchParams,
  useMatch,
} from "react-router-dom";

const fruits = [
  { id: 1, name: "苹果", price: 100 },
  { id: 2, name: "香蕉", price: 200 },
  { id: 3, name: "橘子", price: 300 },
];

function FruitInfo() {
  // 使用 useParams 获取 params 参数
  // const params = useParams();
  // const info = fruits.find((item) => item.id === +params.id);
  // console.log(info);

  // 使用 useSearchParams 获取 search 参数
  //    返回的是一个数组，数组的第一项是一个 URLSearchParams 类型的对象，不能直接获取到参数，需要使用他的一些方法去获取
  //    props.location.search => '?key1=value1&key2=value2'
  //    useSearchParams()   => 数组的第一项  => URLSearchParams 的实例对象
  //                        => 数组的第二项  => 是一个函数，可以修改url地址search参数，猜你功能可以这样玩
  // const [search, setSearch] = useSearchParams();
  // //   去 search 的 id
  // const id = search.get("id");
  // const info = fruits.find((item) => item.id === +id);

  // const location = useLocation();
  // console.log(location, "@@");

  // 使用 useLocation 获取 state 参数
  const location = useLocation();
  const id = location.state.id;
  const info = fruits.find((item) => item.id === +id);

  const match = useMatch("/fruit-detail");
  console.log("111", match);

  return (
    <div>
      <h2>水果详情</h2>
      <p>id: {info.id}</p>
      <p>name: {info.name}</p>
      <p>price: {info.price}</p>

      {/* <button
        onClick={() => {
          setSearch("?id=2");
        }}
      >
        点我，调用 setSearch
      </button> */}
    </div>
  );
}

function App() {
  return (
    <div className="app">
      <div className="header">卖水果咯</div>
      <div className="main">
        <div className="left">
          <ul>
            {fruits.map((item) => {
              return (
                <li key={item.id}>
                  {/* params 传递参数，直接在url路径上按照定义的path规则来传递 */}
                  {/* <NavLink className="link" to={`/fruit-detail/${item.id}`}>
                    {item.name}
                  </NavLink> */}

                  {/* search 传递参数，使用 ?号来传递 */}
                  {/* <NavLink className="link" to={`/fruit-detail?id=${item.id}`}>
                    {item.name}
                  </NavLink> */}

                  {/* state 传递参数，需要给 Link 或 NavLink 提供 state 的属性来传递 */}
                  <NavLink
                    className="link"
                    to="/fruit-detail"
                    state={{
                      id: item.id,
                    }}
                  >
                    {item.name}
                  </NavLink>
                </li>
              );
            })}
          </ul>
        </div>
        <div className="right">
          <Routes>
            {/* params 参数的 路由定义 需要占坑 */}
            {/* <Route path="/fruit-detail/:id" element={<FruitInfo />}></Route> */}

            {/* search、state 参数的 路由定义 不需要占坑 */}
            <Route path="/fruit-detail" element={<FruitInfo />}></Route>
          </Routes>
        </div>
      </div>
    </div>
  );
}

export default App;
